<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算器</title>
    <script type="text/javascript">
    function caulate(){
        var First=document.getElementById("first").value;
        var Sencond=document.getElementById("sencond").value;
        var sesult=document.getElementById("result").value;
        var mark=
    }
    
    </script>
    <style>
    .body{
        padding: 0px;
        margin: 0px;
    }
    .box{
        width:240px;
        height: 180px;
        background-color:rgb(201,228,149);
        margin: 0 auto; 
    }
    .box_b{
        font-family: 楷体;
        font-weight: bold;
        text-align: center;
    }
    .jg{
        width: 54px;
    }
    </style>
</head>
<body>
    <div class="box">
        
    <div class="box_b">
        购物简易计算器
    </div>
    <div class="box_a">第一个数<input type="text"></div><br>
    <div class="box_a">第二个数<input type="text"></div><br>
    <div>
        <input type="button" value="+" class="jg">
        <input type="button" value="-" class="jg">
        <input type="button" value="*" class="jg">
        <input type="button" value="/" class="jg">
    </div><br>
    <div class="box_a">计算结果<input type="text"></div>
    
</div>
</body>
</html>